<style type="text/less">
    @import "/web/public/public.less";
    #logo.course{
        margin-top: 54px;
        .logo_wrap{
            width: 106px;
            text-align: center;
            a{
                display: inline-block;
                margin-bottom: 60px;
                .rotate_wrap{
                    position: relative;
                    overflow: hidden;
                    width: 76px;
                    height: 76px;
                    text-align: center;
                    transition: all .5s linear;
                    transform-style: preserve-3d;
                    margin: 0 auto;
                    &:hover{
                        img{
                            transform: rotateY(180deg);
                        }
                    }
                    .rotate{
                        position: absolute;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        transition: all .8s;
                    }
                    .front{
                        z-index: 1;
                        backface-visibility:hidden;
                        -webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
                        -moz-backface-visibility:hidden; 	/* Firefox */
                        -ms-backface-visibility:hidden; 	/* Internet Explorer */
                    }
                }
                img{
                    width: 76px;
                }
                .tip{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 24px;
                    letter-spacing: 1px;
                    color: #333333;
                }
            }

        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<div id="logo" class="course">
    <#if channelList[0].channelStatus == 1>
        <ul class="logo_wrap">
            <a href="${channelList[1].channelUrl}" rel="nofollow" target="_blank">
                <div class="rotate_wrap">
                    <img class="rotate front" src="${channelList[0].siteLogo}">
                    <img class="rotate back" src="${channelList[1].siteLogo}">
                </div>
                <p class="tip">${channelList[0].channelDescription}</p>
            </a>
        </ul>
    </#if>
    <#if channelList[2].channelStatus == 1>
        <ul class="logo_wrap">
            <a href="${channelList[2].channelUrl}" rel="nofollow" target="_blank">
                <img src="${channelList[2].siteLogo}">
                <p class="tip">${channelList[2].channelDescription}</p>
            </a>
        </ul>
    </#if>
    <#if channelList[3].channelStatus == 1>
        <ul class="logo_wrap">
            <a href="${channelList[3].channelUrl}" rel="nofollow" target="_blank">
                <img src="${channelList[3].siteLogo}">
                <p class="tip">${channelList[3].channelDescription}</p>
            </a>
        </ul>
    </#if>
</div>